<template>
  <div class="image-containter">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>素材管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="start">
            <el-radio-group v-model="collect" size="mini" @change="loadImages(1)">
                <el-radio-button :label="false">全部</el-radio-button>
                <el-radio-button :label="true">收藏</el-radio-button>
            </el-radio-group>
            <el-button size="mini" type="success" @click="dialogUploadVisible = true">添加素材</el-button>
        </div>
        <el-row :gutter="10">
            <el-col :md="12" :sm="6" :xs="6" :lg="4" v-for="item in images" :key="item.id" class="image-item">
                <el-image style="height: 100px;" :src="item.url"  fit="cover"></el-image>
                <div class="imageFloot">
                    <el-button type="warning" @click="onCollected(item)" :icon="item.is_collected ? 'el-icon-star-on' : 'el-icon-star-off'" circle size="mini" :loading="item.loading"></el-button>
                    <el-button type="danger" @click="oncollectDel(item.id)" icon="el-icon-delete-solid" circle size="mini"></el-button>
                    <!-- <i :class="{
                        'el-icon-star-on': item.is_collected,
                        'el-icon-star-off': !item.is_collected
                    }"
                    @click="onCollected(item)"></i>
                     <i class="el-icon-delete-solid"></i>
                     -->
                </div>
            </el-col>
        </el-row>
      <el-pagination background layout="prev, pager, next" :total="totalCount" :page-size="pageSize" :current-page.sync="page" @current-change="onPageChange"> </el-pagination>
      </el-card>
      <el-dialog title="上传素材" :visible.sync="dialogUploadVisible" :append-to-body="true" width="26%">
       <el-upload class="upload-demo" v-if="dialogUploadVisible" drag action="http://ttapi.research.itcast.cn/mp/v1_0/user/images" multiple :headers="uploadHeaders" name="image" :on-success="onUploadSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
       </el-upload>
      </el-dialog>
  </div>
</template>

<script>
import { getImages,collectImages,collectImagesDelete } from '@/api/image'
export default {
  name:'ImageIndex',
  data () {
      const user = JSON.parse(window.localStorage.getItem('user'));
    return {
        collect: false,
        images: [],
        dialogUploadVisible: false,
        uploadHeaders: {
            Authorization: `Bearer ${user.token}`
        },
        totalCount: 0,
        pageSize: 24,
        page: 1
    }
  },
  methods: {
      loadImages(page){
          this.page = page;
          getImages({
              collect: this.collect,
              page: page,
              per_page: this.pageSize
          }).then(res => {
              let results = res.data.data.results;
              results.forEach(img => {
                  img.loading = false;
              });
              this.images = results;
              this.totalCount = res.data.data.total_count;
          })
      },
      onUploadSuccess(){
          this.dialogUploadVisible = false;
          this.loadImages(this.page);
          this.$message.success('上传成功！！！');
      },
      onPageChange(page){
          this.loadImages(page);
      },
      onCollected(img){
        img.loading = true; 
        collectImages(img.id,!img.is_collected).then(res => {
            img.loading = false;
            this.$message.success('收藏成功！！！');
            this.loadImages(this.page);
        })
      },
      oncollectDel(imgId){
          collectImagesDelete(imgId).then(res => {
              this.$message.success('删除成功！！！');
              this.loadImages(this.page);
          })
      }
  },
  created () {
      this.loadImages(1);
  }
}
</script>
<style lang="less" scoped>
    .start{
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
    }
    .image-item{
        position: relative;
        .imageFloot{
            height: 25px;
            background-color:rgba(204,204,204,.6);
            position: absolute;
            left: 5px;
            right: 5px;
            bottom: 4px;
            font-size: 20px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            color: white;
        }
    }
</style>